<template>
    <div>
        <h1>实时库存数据</h1>
        <div v-if="inventory">
            <p>{{ inventory }}</p>
        </div>
        <div v-else>
            <p>加载中...</p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
//@ts-ignore
import * as signalR from '@microsoft/signalr';

export default defineComponent({
    name: 'WarehouseDashboard',
    setup() {
        const inventory = ref<string | null>(null);

        // 创建 SignalR 连接
        const connection = new signalR.HubConnectionBuilder()
            .withUrl('http://localhost:5000/warehouseHub')
            .build();

        // 连接 SignalR 并接收数据
        onMounted(() => {
            connection.start()
                .then(() => {
                    console.log('Connected to SignalR Hub');
                })
                .catch((err: Error) => {
                    console.error('SignalR connection error:', err);
                });

            // 接收后台推送的数据
            connection.on('ReceiveInventoryUpdate', (data: string) => {
                inventory.value = data;
            });
        });

        return {
            inventory
        };
    }
});
</script>

<style scoped>
h1 {
    font-size: 24px;
    color: #333;
}
</style>